<template>
  <el-card>
    <template #header>
      <span class="el-card-title">年度分析趋势图</span>
      <i-ep-close
        v-show="!panelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      />
    </template>

    <div class="echarts h-full">
      <ECharts
        v-if="option"
        :option="option"
        :id="`barLine` + props.id"
        ref="chart"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const emit = defineEmits(["deletePanelItemEvent"]);
const routeName = useRoute().name;

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const option = ref();

const chart = ref();
const tooltipInterval = ref();
const loopShowFirstSeries = ref(true);
const myChartLoopSeriesIndex = ref(-1);
onMounted(() => {
  option.value = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)",
      borderColor: "transparent",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "rgba(0,0,0,.5)",
          fontFamily: "DINLight",
        },
      },
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    legend: {
      data: ["合格数", "返修数", "报废数", "完成率"],
      left: "center",
      top: "2%",
      textStyle: {
        color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#666",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: {
      type: "category",
      data: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
      axisLine: {
        lineStyle: {
          color: "#cdd5e2",
        },
      },
      axisLabel: {
        color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#999",
        fontSize: 12,
        fontFamily: "DINLight",
      },
    },

    yAxis: [
      {
        type: "value",
        name: "个",
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#999",
          fontSize: 12,
          fontFamily: "DINLight",
        },
        axisLine: {
          lineStyle: {
            color: "#cdd5e2",
          },
        },
      },
      {
        type: "value",
        name: "百分比",
        nameTextStyle: {
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#999",
        },
        position: "right",
        axisLine: {
          lineStyle: {
            color: "#cdd5e2",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: "{value}%", //右侧Y轴文字显示
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#999",
          fontFamily: "DINLight",
        },
      },
    ],
    series: [
      {
        name: "合格数",
        type: "bar",
        barWidth: "12px",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#29acff",
            },
            {
              offset: 1,
              color: "#4bdfff",
            },
          ]),
          // color: "#73e2e2",
          borderRadius: 0,
        },
        data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
      },
      {
        name: "返修数",
        type: "bar",
        barWidth: "12px",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3366ff",
            },
            {
              offset: 1,
              color: "#5dc1fd",
            },
          ]),
          // color: "#3366ff",
          borderRadius: 0,
        },
        data: [400, 500, 500, 500, 500, 400, 400, 500, 500],
      },
      {
        name: "报废数",
        type: "bar",
        barWidth: "12px",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#01c871",
            },
            {
              offset: 1,
              color: "#55f49c",
            },
          ]),
          // color: "#886EFF",
          borderRadius: 0,
        },
        data: [400, 600, 700, 700, 1000, 400, 400, 600, 700],
      },
      {
        name: "完成率",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: false, //平滑曲线显示

        symbol: "circle", //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          color: "#ffa43a",
          borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
          borderWidth: 5,
        },
        lineStyle: {
          color: "#ffa43a",
        },

        data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
      },
    ],
  };

  nextTick(() => {
    setTimeout(() => {
      window.requestAnimationFrame(() => {
        autoShowTooltip();

        chart.value?.getInstance().on("mouseover", () => {
          if (tooltipInterval.value) {
            clearInterval(tooltipInterval.value);
            tooltipInterval.value = null;
          }
        });

        chart.value?.getInstance().on("globalout", () => {
          if (!tooltipInterval.value) {
            autoShowTooltip();
          }
        });
      });
    }, 2000);
  });
});

function autoShowTooltip() {
  let dataCount = 8;
  if (!chart.value?.getInstance()) {
    chart.value = echarts?.getInstanceByDom(
      document.getElementById(`barLine` + props.id)
    );
  }
  tooltipInterval.value = setInterval(() => {
    if (myChartLoopSeriesIndex.value === dataCount) {
      loopShowFirstSeries.value = !loopShowFirstSeries.value;
      myChartLoopSeriesIndex.value = -1;
    }

    chart.value &&
      chart.value?.getInstance().dispatchAction({
        type: "showTip",
        seriesIndex: loopShowFirstSeries.value ? 1 : 3,
        dataIndex: myChartLoopSeriesIndex.value,
      });
    myChartLoopSeriesIndex.value++;
  }, 1500);
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}

.echarts {
  width: 100%;
  height: calc(100% - 45px);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  padding: 15px;
}
</style>
